/**
 * Created with JetBrains PhpStorm.
 * User: ishowshao
 * Date: 13-3-13
 * Time: 下午2:28
 * To change this template use File | Settings | File Templates.
 */
(function (namespace, name) {
    var keyMap = {
        ' ': 32,
        ';': 59,
        ',': 44,
        '\n': 10,
        '\r': 13
    };
    var prepareSeparator = function (separator) {
        var result = [13];
        if (jQuery.isArray(separator)) {
            for (var i = 0; i < separator.length; i++) {
                if (keyMap[separator[i]]) {
                    result.push(keyMap[separator[i]]);
                }
            }
        }
        return result;
    };
    var TagBox = function (config) {
        this.config = config || {};
        this.separator = prepareSeparator(this.config.separator);
        this.name = this.config.name || '';
        this.valueCache = [];
        this.submitSeparator = config.submitSeparator || ',';
        this.make();
    };
    TagBox.prototype = {
        make: function () {
            var that = this;
            this.el = jQuery('<div class="i-tag-box"><span class="i-tag-box-tag-ct"></span></div>');
            this.inputEl = jQuery('<input class="i-tag-box-input" type="text">');
            this.hiddenEl = jQuery('<input type="hidden">').attr('name', this.name);
            this.el.append(this.hiddenEl);
            this.tagCt = this.el.find('.i-tag-box-tag-ct');
            this.el.append(this.inputEl);
            this.inputEl.keypress(function (e) {
                if (that.isTrigger(e.which)) {
                    e.preventDefault();
                    that.addTag(this);
                }
            });
            this.inputEl.keydown(function (e) {
                if (e.which == 8) {
                    //delete
                    if (jQuery.trim(jQuery(this).val()) == '') {
                        var selected = that.tagCt.find('.i-tag-box-tag-selected');
                        if (selected.length > 0) {
                            that.removeValue(selected.data('value'));
                            selected.remove();
                        } else {
                            that.tagCt.find('>span:eq(-1)').addClass('i-tag-box-tag-selected');
                        }
                    }
                }
            });
            this.inputEl.blur(function () {
                that.addTag(this);
                that.hiddenEl.val(that.valueCache.join(that.submitSeparator));
            });
            //delete
            this.tagCt.delegate('.i-tag-box-delete', 'click', function () {
                var tag = jQuery(this).closest('span');
                that.removeValue(tag.data('value'));
                tag.remove();
            });
        },
        render: function (renderTo) {
            jQuery(renderTo).append(this.el);
        },
        isTrigger: function (key) {
            return jQuery.inArray(key, this.separator) !== -1;
        },
        removeValue: function (value) {
            var index = jQuery.inArray(value, this.valueCache);
            if (index !== -1) {
                this.valueCache.splice(index, 1);
                this.saveValue();
            }
        },
        saveValue: function () {
            this.hiddenEl.val(this.valueCache.join(this.submitSeparator));
        },
        addTag: function (input) {
            var tagValue = jQuery.trim(jQuery(input).val());
            if (tagValue !== '') {
                this.tagCt.append(jQuery('<span class="i-tag-box-tag"></span>').text(tagValue).data('value', tagValue).append('<a class="i-tag-box-delete"></a>'));
                this.valueCache.push(tagValue);
                jQuery(input).val('');
            }
        }
    };
    TagBox.prototype.constructor = TagBox;

    namespace = namespace || window;
    name = name || 'TagBox';

    namespace[name] = TagBox;
})(window, 'TagBox');
